<template>
  <div class="ep-render-form-container">
    <el-form
      ref="widgetFormRef"
      class="ep-form-widget-list"
      :model="formModel"
      :validate-on-rule-change="false"
      :hide-required-asterisk="false"
      :label-position="labelPosition"
      :label-width="labelWidth"
      :size="size"
    >
      <div v-for="(widget, index) in widgetListFilter" :key="index">
        <template v-if="widget.options.permission < 2">
          <div v-if="widget.type === 'correlation'">
            <component
              :is="`ep-${widget.type}`"
              v-model="formModel[widget.options.name]"
              :options="widget.options"
              :form-data="formModel"
            >
              <template v-if="$slots.correlation" #default="{ item, remove }">
                <slot name="correlation" :item="item" :remove="remove" />
              </template>
              <template v-if="$slots.correlationDialog" #dialog="{ options, callback }">
                <slot name="correlationDialog" :options="options" :callback="callback" />
              </template>
            </component>
          </div>
          <div v-else>
            <component
              :is="`ep-${widget.type}`"
              v-model="formModel[widget.options.name]"
              :options="widget.options"
              :form-data="formModel"
            />
          </div>
        </template>
      </div>
    </el-form>
  </div>
</template>

<script lang="ts">
import _ from 'lodash'
import { defineComponent, ref, computed, watch } from 'vue'
const name = 'ep-render-form'
Symbol(name)

const defaultProps = {
  /** 表单列表 */
  widgetList: {
    type: Array,
    default: null
  },
  /** 表单数据 */
  formData: {
    type: Object,
    default: null
  },
  /**
   * 组件权限 0可编辑 1只读 2隐藏
   * key value
   */
  permissions: {
    type: Object,
    default: null
  },
  /** 表单设置 */
  formConfig: {
    type: Object,
    default: () => ({
      labelPosition: 'left',
      labelWidth: 80,
      size: 'default'
    })
  }
}

export default defineComponent({
  name,
  props: defaultProps,
  emits: ['change'],
  setup(props, { emit }) {
    const widgetFormRef = ref(null)

    /** 表单数据对象 */
    const formModel = ref<Record<string, any>>({})
    watch(
      () => props.formData,
      (val) => {
        if (val) {
          formModel.value = _.cloneDeep(val)
        }
      },
      { immediate: true }
    )

    const _filterWidget = (list: any, permissions: any): any => {
      const widgetList = []
      if (list && Array.isArray(list)) {
        for (let index = 0; index < list.length; index++) {
          const item = _.cloneDeep(list[index])
          if (item.type === 'card' && item.components) {
            widgetList.push(..._filterWidget(item.components, permissions))
          } else {
            item.options.permission = 0 // 组件权限 0可编辑 1只读 2隐藏
            if (permissions && permissions[item.id] !== undefined) {
              item.options.permission = permissions[item.id]
            }
            widgetList.push(item)
          }
        }
      }
      return widgetList
    }
    const widgetListFilter = computed(() => {
      const list = _filterWidget(props.widgetList, props.permissions)
      return list
    })

    const labelPosition = computed(() => {
      const position = props.formConfig?.labelPosition || 'left'
      return position
    })
    const labelWidth = computed(() => {
      if (props.formConfig?.labelPosition === 'top') {
        return '100%'
      }
      return props.formConfig?.labelWidth
    })
    const size = computed(() => props.formConfig?.size || 'default')

    return { widgetFormRef, formModel, widgetListFilter, labelPosition, labelWidth, size }
  }
})
</script>
